import React, { Component } from 'react'
import './PHeader.scss'
import cns from 'classnames'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { changeaction } from './../../../store/actionCreators'
class PHeader extends Component {
  constructor() {
    super()
    this.state = {
      checked1: '1'
    }
  }
  render() {
    // console.log(this.props)
    return (
      <div className="PHeader">
        <div className="PHeader_line">
          <div className="PHeader_line_logo">
            <a href="/">
              <img
                src={require('./../../../assets/Peisong/logo.png')}
                alt="logo"
              />
            </a>
          </div>
          <ul className="ul1">
            <li className={cns({ active_p_li: this.state.checked1 === '1' })}>
              <Link
                to="/Peisong/PContent/PCMain"
                id="1"
                onClick={this.changecheckedli}
              >
                首页
              </Link>
            </li>
            <li className={cns({ active_p_li: this.state.checked1 === '2' })}>
              <Link
                to="/Peisong/PContent/PCS"
                id="2"
                onClick={this.changecheckedli}
              >
                商户端
              </Link>
            </li>
            <li className={cns({ active_p_li: this.state.checked1 === '3' })}>
              <Link
                to="/Peisong/PContent/PCP"
                id="3"
                onClick={this.changecheckedli}
              >
                配送端
              </Link>
            </li>
            <li className={cns({ active_p_li: this.state.checked1 === '4' })}>
              <Link
                to="/Peisong/PContent/PCPAW"
                id="4"
                onClick={this.changecheckedli}
              >
                关于我们
              </Link>
            </li>
          </ul>
          <Link
            to="/Peisong/PContent/PCAPPD"
            className="AppDownload"
            onClick={this.clearcheckedli}
          >
            APP下载
          </Link>
        </div>
        <div className="PHeader_shadow"></div>
      </div>
    )
  }
  // 改变选中的li
  changecheckedli = e => {
    var num = e.currentTarget.id
    setTimeout(() => {
      this.setState({
        checked1: num
      })
    })

    this.props.changecheck1(num)
  }
  // 清除选中的效果
  clearcheckedli = () => {
    this.setState({
      checked1: 999
    })
  }
  //
  componentDidMount() {
    setTimeout(() => {
      const checked2 = JSON.parse(localStorage.getItem('check') || '{}')
      var num = checked2.toString()
      this.setState({
        checked1: num
      })
    }, 10)
  }
  //
  componentWillUnmount() {
    localStorage.setItem('check', '1')
  }
}
const mapStateToProps = state => {
  return state
}
const mapDispatchToProps = dispatch => {
  return {
    changecheck1(num) {
      dispatch(changeaction(num))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(PHeader)
